<style lang="less">
</style>

<template>
<div> <Alert>本页内容按排序正序排序</Alert>
 <Card>  
        <p slot="title">
            <Icon type="navicon-round"></Icon>
            导航管理
        </p>
        <row>
            <i-col span="6">
        <Button-group>
        <Button @click="showaddmodal()">添加</Button>
        <Button @click="saveordnum">保存排序</Button>
        <Button @click="delduo">批量删除</Button>
    </Button-group>
            </i-col>
            <i-col span="4">                
                <i-Select v-model="type" @on-change="typechange">
                    <Option v-for="item in types" :value="item.ID" :key="item.ID">{{item.title}}</Option>
                </i-Select>
            </i-col>
            <i-col span="14">  
            </i-col>
        </row>
    <div style="margin-top:10px"></div>
    <i-table :columns="cols" :data="data" stripe @on-selection-change="setselect" ></i-table>
    </Card>
    <Modal v-model="addmodal" :title="modaltitle" @on-ok="addNav">
        <i-Form :model="editData" :label-width="100">
            <Form-item label="导航名称">
                <i-Input type="text" v-model="editData.title" placeholder="导航名称"></i-Input>
            </Form-item>
            <Form-item label="英文名称">
                <i-Input type="text" v-model="editData.etitle" placeholder="英文名称(选填)"></i-Input>
            </Form-item>
            <Form-item label="导航地址">
                <i-Input type="text" v-model="editData.url" placeholder="导航地址">
                </i-Input>
            </Form-item>      
            <Form-item label="设备">
                <i-Select v-model="edittype">
                    <Option v-for="item in navtypes" :value="item.ID" :key="item.ID">{{item.title}}</Option>
                </i-Select>  
            </Form-item>            
            <Form-item label="所属类别">
                <i-Select v-model="editData.classid">
                    <Option v-for="item in fdata" :value="item.ID" :key="item.ID">{{item.title}}</Option>
                </i-Select>
            </Form-item>       
            <Form-item label="打开方式">
                <i-Select v-model="editData.target">
                    <Option v-for="item in targets" :value="item.value" :key="item.value">{{item.title}}</Option>
                </i-Select>
            </Form-item>      
            <Form-item label="排序">
                <i-Input type="text" v-model="editData.ordnum" placeholder="排序">
                </i-Input>
            </Form-item>
        </i-Form>
    </Modal>
</div>

</template>

<script>
import api from '../../libs/api';
export default {
    name: 'content_nav',
    data () {
        return {
            addmodal:false,
            modaltitle:'添加导航',
            targets:[{value:'_self',title:'默认'},{value:'_blank',title:'新窗口'},{value:'_top',title:'顶窗口'}],
            cols:[{
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },{
                    title: 'ID',
                    key: 'ID',
                    width:60
                }, {
                    title: '标题',
                    key: 'title',
                    align:'left',
                    render:(h,params)=>{
                        return h('Button',
                                    {
                                        props: {
                                            type: 'text',//无边框，像文字格式
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {         
                                                this.showaddmodal(Object.assign({},params.row));
                                            }
                                        }
                                    },
                                    params.row.title)
                    }
                },{
                    title: '链接',
                    key: 'url',
                    align:'left'
                },
                {
                    title: '设备',
                    key: 'ismobile',
                    align:'center',
                    width:80,
                    render:(h,params)=>{
                        var state="PC";
                        if(params.row.ismobile)
                        {
                            state="手机";
                        }
                        return h("span",state);
                    }
                },
                {
                    title: '排序',
                    key: 'ordnum',
                    align:'center',
                    width:80,
                    render:(h,params)=>{
                        return h('Input',{
                            props:{
                                value:params.row.ordnum
                            },
                            on:{
                                'on-blur':(event) => {
                                    this.data[params.index].ordnum = event.target.value;
                                }
                            },
                        })
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                        width:'120px',
                    render: (h, params) => {
                        return h('div',
                            [
                                h('Button',
                                    {
                                        props: {
                                            //type: 'text',//无边框，像文字格式
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {         
                                                this.showaddmodal(Object.assign({},params.row));
                                            }
                                        }
                                    },
                                    '编辑'),
                                    h('span',' '),
                                h('Button',
                                    {
                                        props: {
                                            //type: 'text',//无边框，像文字格式
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {
                                                this.delnav(params.index);
                                            }
                                        }
                                    },
                                    '删除')
                            ])
                    }
                }],
            data:[],
            editData:{},
            fdata:[],
            selectdata:[],
            types:[{title:"默认",ID:0},{title:"PC",ID:1},{title:"手机",ID:2}],
            navtypes:[{title:"PC",ID:1},{title:"手机",ID:2}],
            type:0,
            edittype:1
        };
    },
    methods:{
        typechange(id){
            this.type=id;
            this.init();
        },
        delnav(index){
            var vm=this;            
            api.post("/nav/del?id="+vm.data[index].ID).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success(res.data.msg);
                }
                else{
                    vm.$Message.error(res.data.msg);
                }
                vm.init();
            })
        },
        setselect(selection){
            this.selectdata=selection;
        },
        saveordnum(){
            var vm=this;
            api.post("/nav/saveordnum",this.data).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success("排序完成！");
                }
                else{
                    vm.$Message.error("排序失败！");
                }
                vm.init();
            })
        },
        delduo(){
            var vm=this; 
            api.post("/nav/delall",{data:this.selectdata}).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success("删除成功！");
                }
                vm.init();
            })
        },
        showaddmodal(model){
            this.modaltitle="编辑导航";
            if(model==undefined){
                this.editData={};
                this.editData.classid=0;
                this.editData.target="_self";
                this.edittype=1;
            }
            else{
                var vm=this;
                this.getmodel(model.ID,function(data){
                    vm.editData=data;
                    vm.edittype=data.ismobile?2:1;
                    })                
                
            }
            this.addmodal=true;
        },
        getmodel(id,callback){
            api.get("/nav/get/"+id).then(function(res){
                callback(res.data.msg);
            });
        },
        addNav(){
            var vm=this;            
            this.editData.ismobile=this.edittype==2;
            api.post("/nav/save",this.editData).then(function(res){
                if(vm.editData.ID>0)
                    vm.$Message.success("修改成功！");
                else                    
                    vm.$Message.success("添加成功！");
                vm.addmodal=false;
                vm.init();
            })
        },
        init(){
            var vm=this;
            api.get("/nav/getlist?type="+vm.type+"&t="+new Date().getSeconds()).then(function(res){
                var navlist=res.data.msg;
                var tmplist=[];
                for(var item in navlist){
                    tmplist.push(navlist[item]);
                    if(navlist[item].children.length>0){
                        var nchild=navlist[item].children;
                        for(var ncitem in nchild){
                            nchild[ncitem].title="　|-"+nchild[ncitem].title;
                            tmplist.push(nchild[ncitem]);
                            if(nchild[ncitem].children.length>0){
                                var c2child=nchild[ncitem].children;                                
                                for(var c2item in c2child){
                                    c2child[c2item].title="　　|-"+c2child[c2item].title;
                                    tmplist.push(c2child[c2item]);
                                }
                            }
                        }
                    }
                }
                vm.data=tmplist;
                var tmp1list=[{ID:0,title:"根导航"}];
                tmp1list=tmp1list.concat(tmplist);
                //tmp1list.unshift({ID:0,title:"根导航"})
                vm.fdata=tmp1list;//Object.assign({},vm.data);
                //vm.fdata.unshift({data:{ID:0,title:"根导航"}});
            })
        }
    },
    created(){
        this.init();
    }
};
</script>
